<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="width=device-width, initial-scale=1">
  <meta name="description"
        content="">
  <meta name="author"
        content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
  <meta name="generator"
        content="Hugo 0.88.1">
  <title>Headers · Bootstrap v5.1</title>

  <link rel="canonical"
        href="https://getbootstrap.com/docs/5.1/examples/headers/">



  <!-- Bootstrap core CSS -->
  <link href="../assets/dist/css/bootstrap.min.css"
        rel="stylesheet">

  <style>
    .bd-placeholder-img {
      font-size: 1.125rem;
      text-anchor: middle;
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
    }

    @media (min-width: 768px) {
      .bd-placeholder-img-lg {
        font-size: 3.5rem;
      }
    }
  </style>


  <!-- Custom styles for this template -->
  <link href="headers.css"
        rel="stylesheet">
</head>

<body>



  <main>



    <div class="b-example-divider"></div>

    <div class="container">
      <header
              class="d-flex flex-wrap align-items-center justify-content-center justify-content-md-between py-3 mb-4 ">
        <router-link to="/"
                     class="navbar-brand"
                     style="color:black">者也专栏</router-link>

        <div class="col-md-3 text-end">
          <button type="button"
                  class="btn btn-outline-primary me-2">Login</button>
          <button type="button"
                  class="btn btn-primary">Sign-up</button>
        </div>
      </header>
    </div>

    <div class="b-example-divider"></div>

    <header class="p-3 bg-dark text-white">
      <div class="container">
        <div
             class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="/"
             class="d-flex align-items-center mb-2 mb-lg-0 text-white text-decoration-none">
            <svg class="bi me-2"
                 width="40"
                 height="32"
                 role="img"
                 aria-label="Bootstrap">
              <use xlink:href="#bootstrap" /></svg>
          </a>

          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><a href="#"
                 class="nav-link px-2 text-secondary">Home</a></li>
            <li><a href="#"
                 class="nav-link px-2 text-white">Features</a></li>
            <li><a href="#"
                 class="nav-link px-2 text-white">Pricing</a></li>
            <li><a href="#"
                 class="nav-link px-2 text-white">FAQs</a></li>
            <li><a href="#"
                 class="nav-link px-2 text-white">About</a></li>
          </ul>

          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
            <input type="search"
                   class="form-control form-control-dark"
                   placeholder="Search..."
                   aria-label="Search">
          </form>

          <div class="text-end">
            <button type="button"
                    class="btn btn-outline-light me-2">Login</button>
            <button type="button"
                    class="btn btn-warning">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <div class="b-example-divider"></div>

    <header class="p-3 mb-3 border-bottom">
      <div class="container">
        <div
             class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
          <a href="/"
             class="d-flex align-items-center mb-2 mb-lg-0 text-dark text-decoration-none">
            <svg class="bi me-2"
                 width="40"
                 height="32"
                 role="img"
                 aria-label="Bootstrap">
              <use xlink:href="#bootstrap" /></svg>
          </a>

          <ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
            <li><a href="#"
                 class="nav-link px-2 link-secondary">Overview</a></li>
            <li><a href="#"
                 class="nav-link px-2 link-dark">Inventory</a></li>
            <li><a href="#"
                 class="nav-link px-2 link-dark">Customers</a></li>
            <li><a href="#"
                 class="nav-link px-2 link-dark">Products</a></li>
          </ul>

          <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3">
            <input type="search"
                   class="form-control"
                   placeholder="Search..."
                   aria-label="Search">
          </form>

          <div class="dropdown text-end">
            <a href="#"
               class="d-block link-dark text-decoration-none dropdown-toggle"
               id="dropdownUser1"
               data-bs-toggle="dropdown"
               aria-expanded="false">
              <img src="https://github.com/mdo.png"
                   alt="mdo"
                   width="32"
                   height="32"
                   class="rounded-circle">
            </a>
            <ul class="dropdown-menu text-small"
                aria-labelledby="dropdownUser1">
              <li><a class="dropdown-item"
                   href="#">New project...</a></li>
              <li><a class="dropdown-item"
                   href="#">Settings</a></li>
              <li><a class="dropdown-item"
                   href="#">Profile</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item"
                   href="#">Sign out</a></li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <div class="b-example-divider"></div>

    <header class="py-3 mb-3 border-bottom">
      <div class="container-fluid d-grid gap-3 align-items-center"
           style="grid-template-columns: 1fr 2fr;">
        <div class="dropdown">
          <a href="#"
             class="d-flex align-items-center col-lg-4 mb-2 mb-lg-0 link-dark text-decoration-none dropdown-toggle"
             id="dropdownNavLink"
             data-bs-toggle="dropdown"
             aria-expanded="false">
            <svg class="bi me-2"
                 width="40"
                 height="32">
              <use xlink:href="#bootstrap" /></svg>
          </a>
          <ul class="dropdown-menu text-small shadow"
              aria-labelledby="dropdownNavLink">
            <li><a class="dropdown-item active"
                 href="#"
                 aria-current="page">Overview</a></li>
            <li><a class="dropdown-item"
                 href="#">Inventory</a></li>
            <li><a class="dropdown-item"
                 href="#">Customers</a></li>
            <li><a class="dropdown-item"
                 href="#">Products</a></li>
            <li>
              <hr class="dropdown-divider">
            </li>
            <li><a class="dropdown-item"
                 href="#">Reports</a></li>
            <li><a class="dropdown-item"
                 href="#">Analytics</a></li>
          </ul>
        </div>

        <div class="d-flex align-items-center">
          <form class="w-100 me-3">
            <input type="search"
                   class="form-control"
                   placeholder="Search..."
                   aria-label="Search">
          </form>

          <div class="flex-shrink-0 dropdown">
            <a href="#"
               class="d-block link-dark text-decoration-none dropdown-toggle"
               id="dropdownUser2"
               data-bs-toggle="dropdown"
               aria-expanded="false">
              <img src="https://github.com/mdo.png"
                   alt="mdo"
                   width="32"
                   height="32"
                   class="rounded-circle">
            </a>
            <ul class="dropdown-menu text-small shadow"
                aria-labelledby="dropdownUser2">
              <li><a class="dropdown-item"
                   href="#">New project...</a></li>
              <li><a class="dropdown-item"
                   href="#">Settings</a></li>
              <li><a class="dropdown-item"
                   href="#">Profile</a></li>
              <li>
                <hr class="dropdown-divider">
              </li>
              <li><a class="dropdown-item"
                   href="#">Sign out</a></li>
            </ul>
          </div>
        </div>
      </div>
    </header>

    <div class="container-fluid pb-3">
      <div class="d-grid gap-3"
           style="grid-template-columns: 1fr 2fr;">
        <div class="bg-light border rounded-3">
          <br><br><br><br><br><br><br><br><br><br>
        </div>
        <div class="bg-light border rounded-3">
          <br><br><br><br><br><br><br><br><br><br>
        </div>
      </div>
    </div>

    <div class="b-example-divider"></div>

    <nav class="py-2 bg-light border-bottom">
      <div class="container d-flex flex-wrap">
        <ul class="nav me-auto">
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2 active"
               aria-current="page">Home</a></li>
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">Features</a></li>
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">Pricing</a></li>
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">FAQs</a></li>
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">About</a></li>
        </ul>
        <ul class="nav">
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">Login</a></li>
          <li class="nav-item"><a href="#"
               class="nav-link link-dark px-2">Sign up</a></li>
        </ul>
      </div>
    </nav>
    <header class="py-3 mb-4 border-bottom">
      <div class="container d-flex flex-wrap justify-content-center">
        <a href="/"
           class="d-flex align-items-center mb-3 mb-lg-0 me-lg-auto text-dark text-decoration-none">
          <svg class="bi me-2"
               width="40"
               height="32">
            <use xlink:href="#bootstrap" /></svg>
          <span class="fs-4">Double header</span>
        </a>
        <form class="col-12 col-lg-auto mb-3 mb-lg-0">
          <input type="search"
                 class="form-control"
                 placeholder="Search..."
                 aria-label="Search">
        </form>
      </div>
    </header>

    <div class="b-example-divider"></div>

    <header>
      <div class="px-3 py-2 bg-dark text-white">
        <div class="container">
          <div
               class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
            <a href="/"
               class="d-flex align-items-center my-2 my-lg-0 me-lg-auto text-white text-decoration-none">
              <svg class="bi me-2"
                   width="40"
                   height="32"
                   role="img"
                   aria-label="Bootstrap">
                <use xlink:href="#bootstrap" /></svg>
            </a>

            <ul class="nav col-12 col-lg-auto my-2 justify-content-center my-md-0 text-small">
              <li>
                <a href="#"
                   class="nav-link text-secondary">
                  <svg class="bi d-block mx-auto mb-1"
                       width="24"
                       height="24">
                    <use xlink:href="#home" /></svg>
                  Home
                </a>
              </li>
              <li>
                <a href="#"
                   class="nav-link text-white">
                  <svg class="bi d-block mx-auto mb-1"
                       width="24"
                       height="24">
                    <use xlink:href="#speedometer2" /></svg>
                  Dashboard
                </a>
              </li>
              <li>
                <a href="#"
                   class="nav-link text-white">
                  <svg class="bi d-block mx-auto mb-1"
                       width="24"
                       height="24">
                    <use xlink:href="#table" /></svg>
                  Orders
                </a>
              </li>
              <li>
                <a href="#"
                   class="nav-link text-white">
                  <svg class="bi d-block mx-auto mb-1"
                       width="24"
                       height="24">
                    <use xlink:href="#grid" /></svg>
                  Products
                </a>
              </li>
              <li>
                <a href="#"
                   class="nav-link text-white">
                  <svg class="bi d-block mx-auto mb-1"
                       width="24"
                       height="24">
                    <use xlink:href="#people-circle" /></svg>
                  Customers
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="px-3 py-2 border-bottom mb-3">
        <div class="container d-flex flex-wrap justify-content-center">
          <form class="col-12 col-lg-auto mb-2 mb-lg-0 me-lg-auto">
            <input type="search"
                   class="form-control"
                   placeholder="Search..."
                   aria-label="Search">
          </form>

          <div class="text-end">
            <button type="button"
                    class="btn btn-light text-dark me-2">Login</button>
            <button type="button"
                    class="btn btn-primary">Sign-up</button>
          </div>
        </div>
      </div>
    </header>

    <div class="b-example-divider"></div>
  </main>


  <script src="../assets/dist/js/bootstrap.bundle.min.js"></script>


</body>

</html>